import { useRef, useEffect } from "react";
import { InitSDK, Ability } from "./ThreeSDK";
function App() {
	const canvasRef = useRef<HTMLCanvasElement>(null);

	const sdk = new InitSDK(
		"73c4436e98924a6f80065188ccd5ceb7",
		"596f5c853ebe469682366c1692d1481b",
		"//avatar.aicubes.cn/vtuber",
		"wss://avatar-ws.aicubes.cn:8443"
	);

	let engine: Ability | void;
	const fun = async () => {
		if (canvasRef.current) {
			engine = await sdk.initEngine({
				canvas: canvasRef.current,
				errorCallback: (e) => console.warn(e),
				openQueue: true,
			});
			await engine?.createVtuberById(814, true);
		}
	}

	useEffect(() => {fun()}, []);
	const textori = "12月9日，医药股继续活跃，抗原检测板块高开高走。截至收盘，医昌科技、华盛昌、明德生物涨停，天瑞仪器、达威股份、英诺特20厘米涨停。消息面上，12月8日，国务院联防联控机制印发《新冠病毒抗原检测应用方案》，其中提到，“老年人应每周开展2次抗原检测，试剂由当地免费发放。”“以基层医疗卫生机构为单位进行储备，每家基层医疗卫生机构按照服务人口总数的15-20%储备抗原检测试剂。”"

	let text = "12月9日，医药股继续活跃，抗原检测板块高开高走。截至收盘，医昌科技、华盛昌、明德生物涨停，天瑞仪器、达威股份、英诺特20厘米涨停。消息面上，12月8日，国务院联防联控机制印发《新冠病毒抗原检测应用方案》，其中提到，“老年人应每周开展2次抗原检测，试剂由当地免费发放。”“以基层医疗卫生机构为单位进行储备，每家基层医疗卫生机构按照服务人口总数的15-20%储备抗原检测试剂。”"
	const getRandom = () => {
		return Math.floor(Math.random()*10 + 10)
	}
	const sendtext = () => {
		if(text.length === 0) {
			text = textori
			console.log('chongzhi')
		}
		const num = getRandom()
		const tmp = text.substring(0, num)
		engine?.sendWSText(tmp,"")
		console.log(text)
		text = text.substring(num)
	}

	const sendWSText3 = () => {
		engine?.addWSCallback((params) => {
			console.log("收到响应");
			params.play(
				false,
				(data) => {
					console.log("play ", data.finish);

				},
				() => {
					console.log("finish");
				}
			);
		});

		setInterval(sendtext, 5000)
	};

	const sendWSText = () => {
		engine?.addWSCallback((params) => {
			console.log("收到响应");
			params.play(
				false,
				(data) => {
					console.log(data);
					
					console.log("play ", data.finish);

				},
				() => {
					console.log("finish");
				}
			);
		});


		engine?.sendWSText(
			"【策略方法】口芯片板块出现止跌迹象，结合无人驾驶热点，可适度关注汽车电子，通过策略选股，初步筛选有涨停基因的个股，并结合五星共振策略，参与短线的低吸高抛",
			""
		);
	};

	const sendMessages = () => {
		console.log("messages", engine);
		engine
			?.sendMessages(
				[
					"111111我是虚拟人小花，欢迎使用虚拟人中台的3D卡通播报",
					"222我是虚拟人小花，欢迎使用虚拟人中台的3D卡通播报",
					"333我是虚拟人小花，欢迎使用虚拟人中台的3D卡通播报",
				],
				"test"
			)
			.then((res) => {
				res.play(2);
			});
	};

	const changeVtuber = () => {
		engine!.createVtuberById(956, true)
	}

	return (
		<div>
			<canvas
				ref={canvasRef}
				style={{ height: "900px", width: "500px" }}
				id="unity-canvas"
			></canvas>
			<button onClick={() => sendWSText3()}>sendWSText（仿流式）</button>
			<button onClick={() => sendWSText()}>sendWSText</button>
			<button onClick={() => sendMessages()}>sendMessages</button>
			<button onClick={() => changeVtuber()}>changeVtuber</button>
		</div>
	);
}

export default App;
